/*
 * @Author: HuangYue
 * @Date: 2022-04-08 11:38:17
 * @LastEditors: HuangYue
 * @LastEditTime: 2022-05-12 13:32:38
 * @FilePath: /graduation/src/components/DeviceDetail/index.jsx
 * @Description:
 */
import React, { useEffect, useState, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProDescriptions from '@ant-design/pro-descriptions';
import ProCard from '@ant-design/pro-card';
import { history } from 'umi';
import DeviceRegister from './components/DeviceRegister';
import DeviceVisualization from './DeviceVisualization';
import TubeVisualization from './DeviceVisualization/Tube';
import MRIVisualization from './DeviceVisualization/MRI';
import { Link } from 'react-router-dom';
import EditableTagGroup from '../EditableTagGroup';

const DeviceDetail = () => {
  let {
    location: { query },
  } = history;
  const [status, setStatus] = useState(query.status);
  // 设置设备状态
  const changeStatus = (status) => {
    setStatus(status);
  };
  query.status = status;
  console.log('query', query);

  /**
   * 自定义路由渲染，将路由模式定义为 history，
   * 解决在 breadCrumb 中因为默认模式为 hash
   * 而导致的面包屑无法跳转的问题
   */
  const itemRender = (route, params, routes, paths) => {
    const last = routes.indexOf(route) === routes.length - 1;
    return last ? (
      <span>{route.breadcrumbName}</span>
    ) : (
      // <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
      <Link to={route.path}>{route.breadcrumbName}</Link>
    );
  };
  // 面包屑路由
  const routes = [
    {
      path: '/UserWelcome',
      breadcrumbName: '欢迎页',
    },
    {
      path: '/hospital/deviceList',
      breadcrumbName: '设备管理',
    },
    {
      path: '',
      breadcrumbName: '设备详情',
    },
  ];
  return (
    <PageContainer
      header={{
        title: '设备详情',
        ghost: true,
        breadcrumb: {
          routes: routes,
          itemRender: itemRender,
        },
      }}
    >
      <ProCard>
        <ProDescriptions
          column={3}
          title={query.deviceName}
          request={async () => ({
            data: query || {},
          })}
        >
          <ProDescriptions.Item dataIndex="deviceName" label="设备名称" />
          <ProDescriptions.Item dataIndex="vendor" label="厂家" />
          <ProDescriptions.Item dataIndex="type" label="设备类型" />
          <ProDescriptions.Item dataIndex="typeName" label="产品线" />
          <ProDescriptions.Item
            dataIndex="status"
            label="状态"
            valueEnum={{
              Unregistered: { text: '未注册', status: 'Default' },
              Registering: { text: '注册中', status: 'Processing' },
              Registered: { text: '已注册', status: 'Success' },
              Expired: { text: '已过期', status: 'Error' },
            }}
          />
          <ProDescriptions.Item dataIndex="hospitalName" label="医院名称" />
          <ProDescriptions.Item dataIndex="hospitalAddress" label="医院地址" />
          <ProDescriptions.Item dataIndex="phoneNumber" label="联系人电话" />
          <ProDescriptions.Item label="负责工程师" span={2}>
            <EditableTagGroup deviceInfo={query} />
          </ProDescriptions.Item>
        </ProDescriptions>
      </ProCard>
      <ProCard
        tabs={{
          type: 'card',
        }}
      >
        {/* 只有设备注册之后才展示设备数据 && 远程连接 Tab*/}
        {query.status === 'Registered' && [
          <ProCard.TabPane key="tab1" tab="设备数据">
            <DeviceVisualization />
          </ProCard.TabPane>,
          <ProCard.TabPane key="tab2" tab="磁体监控数据">
            <MRIVisualization />
          </ProCard.TabPane>,
          <ProCard.TabPane key="tab3" tab="球管采集数据">
            <TubeVisualization />
          </ProCard.TabPane>,
          <ProCard.TabPane key="tab4" tab="远程连接">
            远程连接内容
          </ProCard.TabPane>,
        ]}
        {/* 只有还未注册时才展示终端工具 && 远程连接 Tab*/}
        {(query.status === 'Unregistered' || query.status === 'Expired') && (
          <ProCard.TabPane key="tab3" tab="设备注册">
            <DeviceRegister deviceInfo={query} changeStatus={changeStatus} />
          </ProCard.TabPane>
        )}
      </ProCard>
    </PageContainer>
  );
};

export default DeviceDetail;
